<script setup>
import {onMounted, ref} from "vue";
import {ElMessage} from "element-plus";
import {
  addCarryFeeService,
  getCarryFeeListService,
  removeCarryFeeService,
  updateCarryFeeService
} from "@/api/modules/carryFee.js";

defineOptions({name: 'CarryFee'})
const tableData = ref([])
let editItem = {}
let copyItem = ref({}) // 保存元数据

const handleEdit = (row) => {
  copyItem.value = JSON.parse(JSON.stringify(row))
  editItem = row
  row.showEdit = true
}

const handleCancel = (row) => {
  for (let i = 0; i < tableData.value.length; i++) {
    if (tableData.value[i].id === copyItem.value.id) {
      tableData.value[i] = copyItem.value
    }
  }
  editItem = {}
  copyItem.value = {}
  row.showEdit = false
}

const handleConfirm = async (row) => {
  for (let item in editItem) {
    console.log(item)
    if (editItem[item] === '') {
      ElMessage.error('费用不能为空')
      return
    }
  }
  // 发起更新请求
  await updateCarryFeeService(editItem)
  row.showEdit = false
  editItem = {}
  copyItem.value = {}
}

const getCarryFeeList = async () => {
  tableData.value = await getCarryFeeListService()
  tableData.value.map(item => item.showEdit = false)
}

onMounted(async () => {
  await getCarryFeeList()
})

const handleRemove = async (id) => {
  // 发起删除请求
  await removeCarryFeeService(id)
  await getCarryFeeList()
}

const showAdd = ref(false)
const addModel = ref({
  carTypeName: '',
  baseCarryFee: '',
  floorCarryFee: '',
  bigGoodsCarryFee: '',
  bigGoodsFloorCarryFee: ''
})
const handleAdd = () => {
  showAdd.value = true
}

const closeAdd = () => {
  showAdd.value = false
  addModel.value = {}
}

const addSave = async () => {
  await addCarryFeeService(addModel.value)
  await closeAdd()
  await getCarryFeeList()
}

</script>

<template>
  <!--  添加弹出框-->
  <el-dialog v-model="showAdd" class="add" width="500" @close="closeAdd">
    <el-form :model="addModel" label-position="right" label-width="200">
      <el-form-item label="车型名称">
        <el-input v-model="addModel.carTypeName" class="input"></el-input>
      </el-form-item>
      <el-form-item label="基础搬运费用(单位:元)">
        <el-input v-model="addModel.baseCarryFee" type="number" class="input"></el-input>
      </el-form-item>
      <el-form-item label="楼梯搬运费用(单位:元)">
        <el-input v-model="addModel.floorCarryFee" type="number" class="input"></el-input>
      </el-form-item>
      <el-form-item label="大件基础搬运费(按件计费)">
        <el-input v-model="addModel.bigGoodsCarryFee" type="number" class="input"></el-input>
      </el-form-item>
      <el-form-item label="大件楼层费(按件计费)">
        <el-input v-model="addModel.bigGoodsFloorCarryFee" type="number" class="input"></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="footer">
        <el-button class="confirm-btn" plain type="success" @click="addSave">确定</el-button>
      </div>
    </template>
  </el-dialog>

  <el-card>
    <template #header>
      <el-button type="success" @click="handleAdd" v-hasPerm="'biz:carry:fee:dml'">添加</el-button>
    </template>
    <el-table :data="tableData" style="width: 100%" show-overflow-tooltip>
      <el-table-column prop="id" label="id" width="80"></el-table-column>
      <el-table-column prop="carTypeName" label="车型名称" width="120"></el-table-column>
      <el-table-column prop="baseCarryFee" label="基础搬运费用" width="120">
        <template #default="{row}">
          <div v-if="!row.showEdit">
            <span>{{ row.baseCarryFee }}</span>
          </div>
          <div v-else>
            <el-input v-model="row.baseCarryFee"></el-input>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="floorCarryFee" label="楼梯搬运费用" width="180">
        <template #default="{row}">
          <div v-if="!row.showEdit">
            <span>{{ row.floorCarryFee }}</span>
          </div>
          <div v-else>
            <el-input v-model="row.floorCarryFee"></el-input>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="bigGoodsCarryFee" label="大件基础搬运费(按件计费)" width="200">
        <template #default="{row}">
          <div v-if="!row.showEdit">
            <span>{{ row.bigGoodsCarryFee }}</span>
          </div>
          <div v-else>
            <el-input v-model="row.bigGoodsCarryFee"></el-input>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="bigGoodsFloorCarryFee" label="大件楼层费(按件计费)" width="180">
        <template #default="{row}">
          <div v-if="!row.showEdit">
            <span>{{ row.bigGoodsFloorCarryFee }}</span>
          </div>
          <div v-else>
            <el-input v-model="row.bigGoodsFloorCarryFee"></el-input>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="操作" v-hasPerm="'biz:carry:fee:dml'">
        <template #default="{row}">
          <div class="option">
            <div v-if="!row.showEdit">
              <el-button @click="handleEdit(row)" circle icon="Edit" color="#409EFF" plain></el-button>
            </div>
            <div v-else>
              <el-button @click="handleCancel(row)" circle icon="CloseBold" color="#FF4040" plain></el-button>
              <el-button @click="handleConfirm(row)" circle icon="Select" color="#50FF40" plain></el-button>
            </div>
            <el-popconfirm title="你确定删除吗？" @confirm="handleRemove(row.id)">
              <template #reference>
                <el-button plain circle class="delete" icon="Delete" type="danger"></el-button>
              </template>
            </el-popconfirm>
          </div>
        </template>
      </el-table-column>
    </el-table>
  </el-card>
</template>

<style lang="scss" scoped>
.el-card {
  padding: 0;
  height: 100%;

  :deep .el-card__header {
    height: 50px;
    padding: 10px;
  }

  :deep .el-card__body {
    height: calc(100% - 50px);
    padding: 10px;
  }
  .el-table {
    height: calc(100%);
  }
}

.option {
  display: flex;

  .delete {
    margin-left: 10px;
  }
}
</style>
